<template class="discovery">
    <div v-masonry fit-width="true" transition-duration="0.3s" item-selector=".item" origin-left="false" class="container">
        <div v-masonry-tile v-for="item in plantList" class="item">
            <img :src="item.plantPicture" @click="toDetail(item.plantId)" alt="图片链接失效">
        </div>
    </div>
</template>

<script setup lang="ts">
// import Masonry from 'masonry-layout'
import { useRequest } from 'vue-request'
import { ref, reactive, computed, onMounted } from 'vue'
import { usePlantListApi } from '@/api/plant/plant'
import { useRouter } from 'vue-router';

const router = useRouter()

// let masonry: any;
onMounted(() => {
    // document.body.setAttribute('style', '');
    // masonry = new Masonry('.container', {
    //     itemSelector: '.item',//将以此选择器对应的元素作为瀑布流内容元素
    //     columnWidth: '.container .item',//将以此选择器对应的元素宽度作为瀑布流的列宽
    //     percentPosition: true,//支持百分比宽度
    // });
});

const plantPageParam = reactive({
    currentPage: 1,
    pageSize: 30
})

const { data } = useRequest(usePlantListApi(plantPageParam))
const plantList = computed(() => {
    return data.value?.data || []
})

const toDetail = (data: any) => {
    sessionStorage.removeItem("navigation_index")
    router.push({ name: 'detail', params: { id: data } })
}



// //获取随机图片
// function getMockImagesURL() {
//     let arr = [200, 250, 300, 350, 400, 450];
//     const width = arr[Math.ceil(Math.random() * 10) % 6];
//     const height = arr[Math.ceil(Math.random() * 10) % 6];
//     return `https://picsum.photos/${width}/${height}`;
// }

// function imgLoaded(e:any) {
//   masonry.layout();//重新布局
// }

//每2秒加载2张图片
// const imageList = ref(Array.from({ length: 5 }));
// setInterval(() => {
//   imageList.value.push(...Array.from({ length: 2 }));
//   masonry.reloadItems(); //https://masonry.desandro.com/methods.html
// }, 5000);

// setInterval(() => {
//     plantPageParam.pageSize += 5
//     masonry.reloadItems();
// }, 1000)





</script>

<style lang="scss" scoped>
// .container{
//     max-width: 100%;
// }
// .item {
//     width: 33.3%;
//     box-sizing: border-box;
//     display: inline-block;
//     padding: 5px
// }

.item img {
    width: 100%;
    display: block;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.item {
    width: 19.5%;
    margin: 0.25em;
    border-radius: 5px;
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
</style>